<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="layui-carousel" id="ID-carousel-demo-image">
        <div carousel-item>
            <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
            <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
            <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
            <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
            <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
        </div>
    </div>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.8.6/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '877px',
                height: '300px',
                interval: 3000
            });
        });
    </script>
</body>

</html>